<template>
  <div>
    <ElScrollbar height="calc(100vh - 101px)">
      <div class="m-2">
        <ElButton @click="addArticleListchange = true">添加文章</ElButton>
      </div>
      <ElTable :data="ArticleList" class="w-full">
        <ElTableColumn prop="id" label="ID" align="center" width="80"></ElTableColumn>
        <ElTableColumn prop="title" label="标题" align="center" width="180"></ElTableColumn>
        <ElTableColumn prop="" label="内容" align="center">
          <template #default="{ row }">
            <ElButton @click="shoucontent(row.content)">查看内容</ElButton>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="author" label="作者" align="center" width="180"></ElTableColumn>
        <ElTableColumn label="操作" align="center" width="180">
          <template #default="{ row }">
            <ElButton>编辑</ElButton>
            <ElButton type="danger" @click="delArticleList(row)">删除</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
    </ElScrollbar>
    <ElDialog v-model="visviableDialog" title="文章内容">
      <div v-html="rowscontent"></div>
    </ElDialog>
    <ElDialog v-model="addArticleListchange" title="添加文章">
      <template #default>
        <ElForm v-model="fromData" :model="fromData">
          <ElFormItem label="文章标题">
            <ElInput v-model="fromData.title" />
          </ElFormItem>
          <ElFormItem label="文章作者">
            <ElInput v-model="fromData.author" />
          </ElFormItem>
          <WangFditor v-model="fromData.content"></WangFditor>
        </ElForm>
      </template>

      <template #footer>
        <ElButton @click="addArticleListchange = false">取消</ElButton>
        <ElButton type="primary" @click="addsubmit">提交</ElButton>
      </template>
    </ElDialog>
  </div>
</template>

<script setup>
const ArticleList = ref('')
const visviableDialog = ref(false)
const rowscontent = ref(null)
const useArticle = useArticleApi()
const addArticleListchange = ref(false)
const fromData = ref({})
onMounted(() => {
  useArticle.getArticlelist().then((res) => {
    ArticleList.value = res.rows
  })
})
//显示文章
const shoucontent = (res) => {
  rowscontent.value = res
  visviableDialog.value = true
}
//删除文章
const delArticleList = (res) => {
  useArticle.deleteArticle({ id: res.id }).then(() => {
    getArticlelist()
  })
}
//添加列表
const addsubmit = () => {
  console.log(fromData.value)
  useArticle
    .addArticle({
      title: fromData.value.title,
      author: fromData.value.author,
      content: fromData.value.content
    })
    .then(() => {
    getArticlelist()

    })
}

//获取列表
const getArticlelist = () => {
  useArticle.getArticlelist().then((res) => {
    ArticleList.value = res.rows
  })
}
</script>

<style lang="scss" scoped></style>
